<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>伪元素</title>
    <style>
div::before {
	display: inline-block;
	background: #f00;
	content: "开始";
}

div::after {
	display: inline-block;
	background: blue;
	content: attr(data-after);
}

.s::before {
	display: inline-block;
	border: 10px solid transparent;
	border-bottom: 10px solid #f00;
	width: 0;
	height: 0;
	content: "";
}

.ss {
	position: relative;
}

.ss::before {
	display: inline-block;
	position: absolute;
	right: -25px;
	top: 0;
	border: 10px solid transparent;
	border-bottom: 10px solid #f00;
	width: 0;
	height: 0;
	content: "";
}

.ss::after {
	display: inline-block;
	position: absolute;
	right: -25px;
	top: 2px;
	border: 10px solid transparent;
	border-bottom: 10px solid #fff;
	width: 0;
	height: 0;
	content: "";
}

    </style>
</head>

<body>
    <div data-after="结束">
        中间的内容
    </div>
    <span class="s">伪元素制作三角形</span>
    <span class="ss">伪元素制作箭头</span>
</body>

</html>